/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a{text-decoration:none;}
a:hover{text-decoration: underline;}
body{margin:0;padding:0;font: 12px "Microsoft YaHei","SimSun","Arial Narrow",HELVETICA;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
a,a:hover{color:#333;}
input,img { vertical-align: middle}
img { border: 0;}
.mod-l:after, .mod-r:after, .container:after, .wrap:after, .mod:after, .g-hd:after, .bd:after, .g-hd:after, .bd:after, .list:after, .clear:after { display: block; height: 0; content: " "; clear: both;}
.mod-l, .mod-r, .container, .wrap, .mod, .g-hd, .g-bd, .hd, .bd, .list, .clear {
    zoom: 1;
}
.container {
    width: 1120px;
    margin: 0 auto;
}
.mt10 {
    margin-top: 10px;
}
.mt20 {
    margin-top: 10px;
}
.mt30 {
    margin-top: 30px;
}
@mod_color: #4eace7; // 模块的背景色 （如 banner , 单车圣经的背色）

@travel_mod_color: #43d090; //单车旅行主色

.container {
    .mod-l {
        float: left;
    }
    .mod-r {
        float: right;
    }
}

//购买按扭
.g-btn {
    position: relative;
    display: block;
    width: 170px;
    height: 37px;
    background: #fff;
    color: @mod_color;
    text-align: center;
    line-height: 37px;
    font-size: 22px;
    z-index: 999;
    border-radius: 10px;
    &.c-btn2 {
        background: none;
        border: 2px solid #fff;
        color: #fff;
    }
    &.c-btn3 {
        background: @mod_color;
        color: #fff;
    }
    &:hover {
        text-decoration: none;
    }
}

//云块
.g-cloud {
    position: absolute;
    width: 112px;
    height: 78px;
    z-index: 3;
    img {
        width: 100%;
    }
    &.c2 {
        width: 70px;
    }
    &.c3 {
        width: 90px;
    }
}

.title-icon {
    width: 272px;
    height: 30px;
    margin: 60px 0 10px;
    background: url("../img/title_icon.png") no-repeat 0 0;
}

.arrow-line {
    height: 7px;
    width: 100%;
    margin: 15px 0;
    background: url("../img/bicycle_bible/bicycle_bible_2.png") no-repeat 0 0;
}
.footer {
    background: #484848;
    width: 100%;
    padding: 40px 0;
    text-align: center;

    p {
        font: 16px/30px "Microsoft YaHei";
        color: #fff;
    }
}
.header {
    .container {
        position: relative;
    }
    width: 100%;
    height: 48px;
    background: #051e1d;
    .logo {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 82px;
        background: url("../img/icon1.png") no-repeat left top;
    }
    .nav {
        float: right;
        ul {
            overflow: hidden;
            li {
                margin-left: -1px;
                float: left;
                a {
                    display: block;
                    padding: 0 15px;
                    height: 14px;
                    line-height: 14px;
                    margin: 17px 0;
                    color: #ecf0f1;
                    font-size: 14px;
                    border-left: 1px solid #ecf0f1;
                }
            }
        }
    }
}
/*
@name: slider
@description: 轮播共用样式
@require: 无
@author: huaping
*/
.slider {
    position: relative;
    .move-mod {
        position: relative;
        overflow: hidden;
        z-index: 1;
        .list {
            position: relative;
        }
    }
    .btn {
        position: absolute;
        top: 50%;
        widows: 40px;
        height: 40px;
        padding: 10px 0;
        margin: -30px 0 0;
        z-index: 2;
        text-align: center;
        i {
            font-size: 40px;
            line-height: 40px;
        }
        &:hover {
            text-decoration: none;
            i {
                text-decoration: none;
                color: @mod_color;
            }
        }
    }

    .next {
        right: 0;
    }
    .prev {
        left: 0;
    }

    .num-wrap {
        padding: 10px 0 0;
        height: 15px;
        width: 100%;
        text-align: center;
        li {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 10px;
            background: @mod_color;
            *display: inline;
            *zoom: 1;
            margin: 0 5px;
            &:hover {
                cursor: pointer;
                background: #333;
            }
        }
        .active {
            background: #333;
        }
    }
}
.banner {
    background: @mod_color;
    height: 458px;
    .container {
        position: relative;
        height: 100%;
    }

    .cont {
        padding: 100px 0 0;
        h2 {
            width: 763px;
            height: 127px;
            background: url("../img/icon3.png") no-repeat 0 0;
            padding-bottom: 15px;
        }
        p {
            width: 700px;
            line-height: 28px;
            color: #0b4264;
            font-size: 14px;
        }
    }
    
    .line-bg {
        position: absolute;
        left: 160px;
        bottom: 0;
        width: 919px;
        height: 247px;
        background: url("../img/icon2.png") no-repeat 0 0;
    }

}
/*
   单车圣经
*/

.bicycle-bible {
    width: 100%;
    height: 847px;
    background: @mod_color;
    .container {
        position: relative;
        height: 100%;
        .bg {
            position: absolute;
            left: -330px;
            bottom: 0;
            width: 1565px;
            height: 741px;
            background: url("../img/book1_bg.png") no-repeat center bottom;
            z-index: 1;
        }
    }

    .cloud {
        left: 265px;
        top: 114px;
    }
    .c2 {
        left: 620px;
        top: 233px;
    }
    .c3 {
        left: 789px;
        top: 263px;
    }
    .book-thumb {
        position: relative;
        padding-top: 96px;
        width: 289px;
        height: 289px;
        margin: 0 auto;
        background: url("../img/book1_thumb.png") no-repeat 0 96px;
        z-index: 2;
        clear: both;
        overflow: hidden;
    }

    .cont {
        position: relative;
        width: 724px;
        height: 84px;
        margin: 40px auto;
        background: url("../img/book1_cont.png") no-repeat 0 0;
        z-index: 2;
    }
    
    .circle {
        position: relative;
        text-align: center;
        z-index: 2;
        img {
            display: inline;
        }
    }
    .g-btn {
        margin: 40px auto 0;
    }
}
.bicycle-event {
    background: @mod_color;
    overflow: hidden;
    height: 850px;

    .container {
        position: relative;
        margin-top: 160px;
    }

    .mod-bg {
        position: absolute;
        left: -200px;
        top: -165px;
        width: 746px;
        height: 866px;
        background: url("../img/book5_1.png") no-repeat 0 0;
    }

    .book-thumb {
        float: left;
        width: 464px;
        height: 569px;
        margin: 5px 0 0 30px;
    }
    
    .cont {
        float: right;
        width: 570px;
        color: #fff;
        margin: 30px 0 0;
        text-align: center;

        h2 {
            font: 50px/80px "Microsoft YaHei";
        }
        p {
            line-height: 24px;
            margin: 0 40px;
            font-size: 14px;
        }
        
        dl {
            overflow: hidden;
            dd {
                float: left;
                width: 25%;
                overflow: hidden;
                margin-top: 30px;
                img {
                    margin-bottom: 5px;
                }
                strong {
                    display: block;
                    color: #04324f;
                    line-height: 18px;
                    font-weight: bold;
                }
            }
        }
    }

    .g-btn {
        margin: 40px auto 0;
    }
}
/*
   单车旅行
*/
.bicycle-travel {
    height: 760px;
    position: relative;
    z-index: 9;
    
    .book-thumb {
        height: 100%;
        width: 400px;
        float: left;
        background: url("../img/book2_2.png") no-repeat left center;
    }
    
    .cont {
        float: right;
        width: 635px;
        margin-right: 30px;
        padding: 200px 0 0;
        p {
            line-height: 24px; 
            color: #304a5e;
            strong {
                font-size: 20px;
            }
        }
    }
    .line-bg {
        position: absolute;
        bottom: -0;
        left: -10px;
        width: 1134px;
        height: 834px;
        background: url("../img/book2_1.png") no-repeat 0 0;
        z-index: -1;
    }
    .arrow-bg {
        position: absolute;
        right: 330px;
        bottom: 0;
        width: 305px;
        height: 140px;
        background: url("../img/book2_3.png") no-repeat 0 0;

    }
    .g-btn {
        top: 10px;
    }
}
/*
    2013中国顶级自行车赛事
*/
.biketo-cycling {
    width: 100%;
    background: @mod_color;
    padding: 105px 0;
    .book-thumb {
        float: right;
        width: 352px;
        height: 453px;
        margin: 0 150px 0 0;
    }
    
    .cont {
        float: left;
        width: 460px;
        margin: 150px 0 0 110px;
        p {
            text-align: center;
            color: #304a5e;
            line-height: 22px;
            font-size: 14px;
        }
        .line {
            margin: 30px 65px;
            border-top: 1px dashed #304a5e;
        }
    }
}
/*
    美骑图书作品
*/
.book-opus {
    .g-hd {
        height: 40px;
        width: 760px;
        margin: 80px auto 40px;
        position: relative;
        span {
            position: absolute;
            top: 20px;
            left: 0;
            overflow: hidden;
            height: 1px;
            width: 100%;
            background: #ecf0f1;
            z-index: 1;
        }
        strong {
            display: block;
            position: relative;
            width: 250px;
            margin: 0 auto;
            text-align: center;
            background: #fff;
            font: bold 34px/40px "Microsoft YaHei";
            color: #304a5e;
            z-index: 2;
        }
    }
    
    .g-bd {
        ul {
            overflow: hidden;
            width: 1132px;
            li {
                display: none;
                a:hover {
                    text-decoration: none;
                }
                float: left;
                width: 365px;
                height: 395px;
                margin: 0 12px 15px 0;
                text-align: center;

                .thumb {
                    width: 100%;
                    height: 225px;
                    background: #d9e6ee;
                    margin-bottom: 10px;

                    img {
                        position: relative;
                        top: 10px;
                        display: inline;
                        transition: .3s;
                        transform: perspective(400px) rotateX(0deg);
                    }
                }

                strong {
                    font: bold 20px/46px "Microsoft YaHei";
                }
                p {
                    margin: 0 15px;
                    font: 14px/26px "Microsoft YaHei";
                    color: #424242;
                }
                &:hover {
                    .thumb img {
                        transform: perspective(400px) rotateY(30deg) scale(0.9);
                    }
                }
            }
        }
        
        .arrowB {
            display: block;
            width: 71px;
            height: 71px;
            margin: 40px auto;
            background: url("../img/icon4.png") no-repeat 0 0;
        }
    }
}
.report {
    height: 870px;
    position: relative;

    .bg {
        position: absolute;
        left: -119px;
        top: 110px;
        width: 1081px;
        height: 669px;
        z-index: -1;
    }
    
    .arrow-bg {
        position: absolute;
        right: 270px;
        bottom: -1px;
        width: 350px;
        height: 148px;
        background: url("../img/book7_2.png") no-repeat 0 0;
    }

    .g-btn {
        margin: 60px 0 0;
    }
    
    .cont {
        float: right;
        width: 395px;
        margin: 170px 0 0;

        h2 {
            font: 30px/50px "Microsoft YaHei";
        }

        p {
            font: 14px/24px "Microsoft YaHei";
        }
    }
}
@charset "GB2312";
/*
    百届环法
*/
.tour-de-france {
    height: 833px;
    background: @mod_color;
    overflow: hidden;

    .container {
        margin-top: 185px;
    }

    .mod-l {
        position: relative;
        float: left;
        width: 275px;
        margin: 0 -100% 0 0;
        z-index: 9;
    }
    .mod-r {
        float: left;
        width: 100%;
        height: 100%;
        .mod {
            position: relative;
            margin: 0 0 0 280px;
            p {
                width: 480px;
                line-height: 26px;
                color: #fff;
            }
            em {
                font: 600 22px/30px "Microsoft YaHei";
            }
            strong {
                display: block;
                width: 379px;
                height: 101px;
                background: url("../img/book3_2.png") no-repeat left top;
            }
            
            dl {
                width: 480px;
                overflow: hidden;
                margin: 20px 0 0;
                padding-top: 20px;
                border-top: 1px dashed #316b90;
                dd {
                    float: left;
                    margin-right: 15px;
                }
            }
        }
    }

    .book-thumb {
        position: absolute;
        right: 0;
        top: -50px;
        width: 362px;
        height: 608px;
        background: url("../img/book3_1.png") no-repeat 0 0;
    }

    .g-btn {
        margin: 30px auto 0;
    }
}

/*
    影像年鉴
*/
.video-yearbook {
    position: relative;
    height: 920px;
    z-index: 9;
    overflow: hidden;

    .book-thumb {
        position: relative;
        margin: 85px 0 0 155px;
        z-index: 1;
    }

    span {
        position: absolute;
        z-index: 2;
    }
    .s1 {
        top: 295px;
        left: 64px;
    }
    .s2 {
        top: 410px;
        left: 30px;
    }
    .s3 {
        top: 508px;
        left: 15px;
    }
    .s4 {
        top: 157px;
        right: 5px;
    }
    .s5 {
        top: 360px;
        right: 50px;
    }
    .s6 {
        top: 470px;
        right: 18px;
    }
    .arrow {
        position: absolute;
        bottom: 0;
        left: 500px;
        width: 394px;
        height: 159px;
        background: url("../img/book4_7.png") no-repeat 0 0;
    }
}
